<script setup lang="ts">
import { SupplierFormData } from "@/interface/supplier.ts";

defineOptions({
  // 供应商修改、新增弹窗
  name: "UpdateDialog"
})

import { reactive } from 'vue'

const  dialogVisible = defineModel({ default: false })

const formData = reactive<SupplierFormData>({
  level: '2323',
  name: "产品A",
  code: "001",
  shortCode: "PA",
  // type: "电子产品",
  permitNumber: "121323",
  permitExpiryDate: "2025年12月31日",
  licenseNumber: "许可证123",
  licenseExpiryDate: "2025年12月31日",
  address: "123号主街",
  phone: "+1234567890",
  taxRegistrationNumber: "税务登记号123",
  bankName: "美国银行",
  accountNumber: "987654321",
  contactPerson: "张三",
  creditLimit: "5000",
  creationDate: "2024年04月07日",
  usageStatus: "活跃",
  type: [],
});

const emit = defineEmits(['confirm', 'close']);

const confirm = () => {
  emit('confirm');
  dialogVisible.value = false;
}

const close = () => {
  emit('close');
  dialogVisible.value = false;
}


</script>

<template>
  <el-dialog v-model="dialogVisible" title="供应商编辑【新增】" width="800">

    <div class="wrap">
      <el-tabs type="border-card">
        <el-tab-pane label="常规信息">
          <el-form style="max-width: 400px;margin: 0 auto" ref="formRef" :model="formData" label-width="60px" label-position="right">
            <el-form-item prop="level" label="上级">
              <el-input v-model="formData.level" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="code" label="编码">
              <div class="flex">
                <span style="margin-right: 15px;">30858</span>
                <el-input v-model="formData.code" placeholder="请输入" />
              </div>
            </el-form-item>
            <el-form-item prop="name" label="名称">
              <el-input v-model="formData.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="shortCode" label="简码">
              <el-input v-model="formData.shortCode" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-checkbox-group v-model="formData.type">
                <el-checkbox value="Online activities" name="type">
                  药品
                </el-checkbox>
                <el-checkbox value="Promotion activities" name="type">
                  其他
                </el-checkbox>
                <el-checkbox value="Offline activities" name="type">
                  设备
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                  物资
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                  卫生材料
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="附加信息">
          <el-form ref="formRef" style="max-width: 80%;margin: 0 auto" :model="formData" label-width="100px" label-position="right">
            <div class="flex j-s-b" style="width: 100%">
              <el-form-item prop="accountNumber" label="账号">
                <el-input v-model="formData.accountNumber" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="taxRegistrationNumber" label="税务登记号">
                <el-input v-model="formData.taxRegistrationNumber" placeholder="请输入" />
              </el-form-item>
            </div>

            <div class="flex j-s-b" style="width: 100%">
              <el-form-item prop="contactPerson" label="联系人">
                <el-input v-model="formData.contactPerson" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="phone" label="电话">
                <el-input v-model="formData.phone" placeholder="请输入" />
              </el-form-item>
            </div>

            <div class="flex j-s-b" style="width: 100%">
              <el-form-item prop="licenseNumber" label="许可证号">
                <el-input v-model="formData.licenseNumber" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="licenseExpiryDate" label="许可证效期">
                <el-input v-model="formData.licenseExpiryDate" placeholder="请输入" />
              </el-form-item>
            </div>

            <div class="flex j-s-b" style="width: 100%">
              <el-form-item prop="permitNumber" label="执照号">
                <el-input v-model="formData.permitExpiryDate" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="permitExpiryDate" label="执照效期">
                <el-input v-model="formData.permitExpiryDate" placeholder="请输入" />
              </el-form-item>
            </div>

            <div class="flex j-s-b" style="width: 100%">
              <el-form-item prop="name" label="授权号">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="name" label="授权期">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
            </div>

            <div class="flex j-s-b" style="width: 100%">
              <el-form-item prop="name" label="信用期">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="creditLimit" label="信用额">
                <el-input v-model="formData.creditLimit" placeholder="请输入" />
              </el-form-item>
            </div>

            <el-form-item prop="bankName" label="开户银行">
              <el-input v-model="formData.bankName" placeholder="请输入" />
            </el-form-item>

            <el-form-item prop="address" label="地址">
              <el-input v-model="formData.address" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="其他辅助信息">
          <el-form ref="formRef" :model="formData" label-width="70px" label-position="right">
            <div>销售人员委托书信息</div>
            <div class="flex">
              <el-form-item prop="name" label="姓名">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="name" label="日期">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
            </div>
            <div>质量认证信息</div>
            <div class="flex">
              <el-form-item prop="name" label="证号">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
              <el-form-item prop="name" label="日期">
                <el-input v-model="formData.name" placeholder="请输入" />
              </el-form-item>
            </div>
            <el-form-item prop="name" label="首营品种">
              <el-input v-model="formData.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item prop="name" label="备注">
              <el-input v-model="formData.name" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>
